<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="my-timelines-post">
		<template v-if="$_isLogin()">
			<template v-if="listStatus === 'success'">
				<template v-for="(item, index) in list">
					<view class="for" @click="$_to('post/detail?pid=' + item.pid)">
						<!-- 是否匿名判断 -->
						<!-- 是匿名 -->
						<view class="author" v-if="item.isAnonymous">
							<view class="author-avatar">
								<view class="avatar">
									<global-lazy-load-image
										:image="item.author.avatar"
										width="80rpx"
										height="80rpx"
										borderRadius="0">
									</global-lazy-load-image>
								</view>
							</view>
							<view class="author-center">
								<view class="_top">
									<view class="nickname">{{$t('contentAuthorAnonymous')}}</view>
								</view>
								<view class="_bottom">
									<view class="created-time-ago"><text>{{item.createdTimeAgo}}</text></view>
									<view class="_bottom-group" v-if="item.group"><text>来自</text><text>{{item.group.name}}</text></view>
								</view>
							</view>
						</view>
						<!-- 不是匿名 -->
						<view class="author" v-else>
							<view
								class="author-avatar"
								@click.stop="$_to('user/detail?uid=' + item.author.uid)">
								<view
									class="avatar"
									:style="item.author.nicknameColor?'border: 5rpx solid '+item.author.nicknameColor+';':''">
									<global-lazy-load-image
										:image="item.author.avatar"
										width="80rpx"
										height="80rpx"
										borderRadius="0">
									</global-lazy-load-image>
								</view>
								<view
									class="role-name"
									:style="item.author.nicknameColor?'background:'+item.author.nicknameColor+';color:#FFF;':''">{{item.author.roleName[0]}}</view>
							</view>
							<view class="author-center">
								<view class="_top">
									<view class="nickname">{{item.author.nickname}}</view>
									<view class="role-name" :style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';':''"><text>{{item.author.roleName}}</text></view>
								</view>
								<view class="_bottom">
									<view class="created-time-ago"><text>{{item.createdTimeAgo}}</text></view>
									<view class="_bottom-group" v-if="item.group"><text>来自</text><text>{{item.group.name}}</text></view>
								</view>
							</view>
							<view
								class="author-right"
								@click.stop="$_to('user/detail?uid=' + item.author.uid)">
								<view>
									<text class="iconfont icon-add"></text>
									<text>{{$t('detail')}}</text>
								</view>
							</view>
						</view>
						<!-- 帖子标题 -->
						<view class="title" v-if="item.title">{{item.title}}</view>
						<!-- 帖子内容 -->
						<view class="content" :style="item.title?'':'color:#303133;font-size: 32rpx;line-height: 45rpx;'">{{$_filterHtml(item.content)}}</view>
						<!-- 附件 -->
						<public-list-files :item="item.files"></public-list-files>
						
						<view class="_location" v-if="item.geotag">
							<text class="iconfont icon-dingwei1"></text>
							<text>{{item.geotag.name}}</text>
						</view>
						<!-- 尾部 > 帖子数据 -->
						<view class="post-count">
							<view @click.stop="clickUserMarkButton('like',item)">
								<text
									class="iconfont icon-good"
									:style="item.interaction.likeStatus?'color: #409EFF;':''"></text>
								<text :style="item.interaction.likeStatus?'color: #409EFF;':''">{{item.likeCount}}</text>
							</view>
							<view>
								<text class="iconfont icon-comment"></text>
								<text>{{item.commentCount}}</text>
							</view>
							<view @click.stop="clickUserMarkButton('follow',item)">
								<text
									class="iconfont icon-favorite"
									:style="item.interaction.followStatus?'color: #409EFF;':''"></text>
								<text :style="item.interaction.followStatus?'color: #409EFF;':''">{{item.followCount}}</text>
							</view>
						</view>
					</view>
				</template>
				<view
					class="more"
					@click="clickMoreButton">
					{{listPageText}}
				</view>
			</template>
			<template v-if="listStatus === 'loading'">
				<view class="_loading">
					<view class="skeleton-screen" v-for="itemData in item.query.pageSize?item.query.pageSize:1"></view>
				</view>
			</template>
			<template v-if="listStatus === 'empty'">
				<global-empty></global-empty>
			</template>
		</template>
		<template v-else>
			<view>
				<global-empty :item="'未登录，请登录'"></global-empty>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"my-timelines-post",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore')
			};
		},
		mounted(){
			this.getList();
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/timelines",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,isAnonymous,author,createdTimeAgo,moreInfo,title,content,files,previewComments,group,likeCount,commentCount,followCount,geotag.name,interaction",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"nicknameColor,avatar,roleName,nickname,uid",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"author.avatar,author.nickname,content"
					},
					(res) => {
						if(res.data.code == 0){
							if (res.data.data.list.length) {
								this.list = res.data.data.list;
								this.listStatus = "success";
							} else {
								this.listStatus = "empty";
							}
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/post/timelines",
					{
						...this.item.query,
						"page": this.listPage,
						"filterType":"whitelist",
						"filterKeys":"pid,isAnonymous,author,createdTimeAgo,moreInfo,title,content,files,previewComments,group,likeCount,commentCount,followCount,geotag.name,interaction",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"nicknameColor,avatar,roleName,nickname,uid",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"author.avatar,author.nickname,content"
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listWithoutPage')
						}
					}
				)
			},
			clickUserMarkButton(type,item){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":type,
						"type":"post",
						"fsid":item.pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							if(type == 'like'){
								item.interaction.likeStatus = !item.interaction.likeStatus;
								item.likeCount += item.interaction.likeStatus ? 1 : -1;
							}
							if(type == 'follow'){
								item.interaction.followStatus = !item.interaction.followStatus;
								item.followCount += item.interaction.followStatus ? 1 : -1;
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
.my-timelines-post{
	.for{
		padding: 25rpx;
		background: #FFF;
		margin-bottom: 25rpx;
		.author{
			display: flex;
			align-items: center;
			.author-avatar{
				width: 90rpx;
				height: 90rpx;
				overflow: hidden;
				position: relative;
				flex-shrink: 0;
				.avatar{
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					border: 5rpx solid $background;
					border-radius: 200rpx;
				}
				.role-name{
					width: 30rpx;
					height: 30rpx;
					font-size: 16rpx;
					line-height: 16rpx;
					background: $background;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 200rpx;
					border: 1px solid #FFF;
				}
			}
			.author-center{
				display: flex;
				justify-content: center;
				flex-flow: column;
				flex: 1;
				margin: 0 20rpx;
				._top{
					display: flex;
					align-items: center;
					.nickname{
						font-size: 32rpx;
						line-height: 32rpx;
					}
					.role-name{
						height: 32rpx;
						display: flex;
						align-items: center;
						line-height: 18rpx;
						background: $background;
						padding: 0 5rpx;
						margin-left: 10rpx;
						border-radius: 5rpx;
						text{
							font-size: 18rpx;
						}
					}
				}
				._bottom{
					display: flex;
					padding-top: 15rpx;
					.created-time-ago{
						font-size: 22rpx;
						line-height: 22rpx;
						color: $placeholder;
						flex-shrink: 0;
					}
					._bottom-group{
						display: flex;
						align-items: center;
						line-height: 22rpx;
						margin-left: 10rpx;
						text{
							font-size: 22rpx;
							color: $placeholder;
							padding-right: 5rpx;
						}
					}
				}
			}
			.author-right{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				view{
					box-shadow: 0 0 3rpx $theme;
					line-height: 22rpx;
					padding: 10rpx 15rpx;
					border-radius: 100rpx;
					text{
						font-size: 22rpx;
						color: $theme;
					}
				}
			}
		}
		.title{
			font-size: 32rpx;
			line-height: 32rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-top: 25rpx;
			font-weight: bold;
			
		}
		.content{
			margin-top: 15rpx;
			color: $placeholder;
			font-size: 28rpx;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		.post-count{
			display: flex;
			align-items: center;
			justify-content:space-between;
			border-top: 1px solid $background;
			padding-top: 25rpx;
			margin-top: 25rpx;
			view{
				display: flex;
				align-items: center;
				line-height: 32rpx;
				text{
					font-size: 28rpx;
					color: $placeholder;
				}
				.iconfont{
					padding-right: 5rpx;
					font-size: 32rpx;
				}
			}
		}
		._location{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			line-height: 22rpx;
			margin-top: 15rpx;
			text{
				font-size: 22rpx;
				color: $placeholder;
			}
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		line-height: 22rpx;
		padding-bottom: 25rpx;
		color: $placeholder;
	}
	._loading{
		background: #FFF;
		padding: 25rpx 25rpx 1rpx 25rpx;
		.skeleton-screen{
			width: 100%;
			height: 50rpx;
			margin-bottom: 25rpx;
		}
	}
}
</style>